<template>
  <div class="full-parent">
    <!--    <img src="../../assets/img/bg1.png" alt="" class="bg bg1" />-->
    <img src="../../assets/img/bg2.png" alt="" class="bg bg2" />
    <lottie class="map-lottie" :options="defaultOptions" height="100%" width="100%" />
    <img src="../../assets/img/img16.png" alt="title-img" class="title-img" />
    <version-selection />
    <div class="drop-animation" v-if="list.length > 0">
      <drop-animation
        v-for="(name, i) in list"
        :key="name"
        :top="top[i]"
        :label="name"
        @complete="removeAnimation(name)"
      ></drop-animation>
    </div>

    <div class="section-left flex">
      <div class="panel top">
        <panel-container :icon="leftIcon1" title="OS覆盖情况">
          <panelLeftOne></panelLeftOne>
        </panel-container>
      </div>
      <div class="panel middle">
        <panel-container :icon="leftIcon2" title="OS装机量">
          <Pie></Pie>
        </panel-container>
      </div>
      <div class="panel bottom">
        <panel-container :icon="leftIcon3" title="数据资产规模">
          <panel-left-third />
        </panel-container>
      </div>
    </div>
    <div class="section-right flex">
      <div class="panel top">
        <div class="col">
          <panel-container :icon="img18" title="服务场景">
            <panel-right-one-left />
          </panel-container>
        </div>
        <div class="col">
          <panel-container :icon="img19" title="全域泛在感知">
            <panel-right-one-right />
          </panel-container>
        </div>
      </div>
      <div class="panel middle">
        <panel-container :icon="img20" title="算力规模情况">
          <img class="middle-image" src="../../assets/img/img17.png" />
        </panel-container>
      </div>
      <div class="panel bottom">
        <panel-container :icon="img21" title="服务调用实时情况">
          <LineChart></LineChart>
        </panel-container>
      </div>
    </div>
  </div>
</template>

<script>
import mqtt from "../../tool/mqtt";
import PanelContainer from "@/components/panel-container";
import panelLeftOne from "./panel-left-one";
import panelLeftThird from "./panel-left-third";
import panelRightOneLeft from "./panel-right-one-left";
import panelRightOneRight from "./panel-right-one-right";
import DropAnimation from "./drop-animation";
import config from "../../base.config";
import leftIcon1 from "../../assets/img/left-panel-1.png";
import leftIcon2 from "../../assets/img/left-panel-2.png";
import leftIcon3 from "../../assets/img/left-panel-3.png";
import img18 from "../../assets/img/img18.png";
import img19 from "../../assets/img/img19.png";
import img20 from "../../assets/img/img20.png";
import img21 from "../../assets/img/img21.png";
import Pie from "@/components/Pie";
import Line from "@/components/Line";
import versionSelection from "./version-selection";
import animationData from "../../assets/ae/map/data.json";

export default {
  name: "matrix",
  components: {
    PanelContainer,
    panelLeftOne,
    Pie,
    LineChart: Line,
    panelLeftThird,
    versionSelection,
    panelRightOneLeft,
    panelRightOneRight,
    DropAnimation
  },
  data() {
    return {
      list: [],
      top: [],
      leftIcon1,
      leftIcon2,
      leftIcon3,
      img18,
      img19,
      img20,
      img21,
      defaultOptions: { animationData: animationData, loop: true, autoplay: true }
    };
  },
  mounted() {
    this.listener = mqtt.addEventListener(config.mqtt.topic, (data) => {
      if (data.code === config.matrixCode.all) {
        this.list = [];
        this.all(data);
      } else if (data.code === config.matrixCode.metro) {
        this.list = [];
        this.metro(data);
      } else if (data.code === config.matrixCode.enterprise) {
        this.list = [];
        this.enterprise(data);
      } else if (data.code === config.matrixCode.lite) {
        this.list = [];
        this.lite(data);
      }
    });
  },
  beforeDestroy() {
    this.listener && this.listener();
    this.listener = null;
  },
  errorCaptured(err, vm, info) {
    console.log(err);
  },
  methods: {
    randomTop(size) {
      let list = [];
      let topMin = window.innerHeight / 4,
        topMax = (window.innerHeight * 3) / 5,
        i = 0,
        times = 0;

      while (i < size) {
        let number = topMin + topMax * Math.random(),
          min;
        if (list.length > 1) {
          let arr = list.map((item) => Math.abs(item - number)).sort((prev, next) => prev - next);
          min = Math.abs(arr[0]);
        } else {
          min = number;
        }

        if (min > 30 || times > 1000) {
          list.push(number);
          i++;
        }
        times++;
      }

      this.top = list;
    },
    // 展示地图上全部 的点
    all(data) {
      // this.list.push("all");
      let list = [...config.metro, ...config.enterprise, ...config.lite];
      this.randomTop(list.length);
      this.addToList(list);
    },
    // 展示地图上metro 的点
    metro(data) {
      // this.list = config.metro;
      this.randomTop(config.metro.length);
      this.addToList([...config.metro]);
    },
    // 展示地图上enterprise 的点
    enterprise(data) {
      // this.list = config.enterprise;
      this.randomTop(config.enterprise.length);
      this.addToList([...config.enterprise]);
    },
    // 展示地图上lite 的点
    lite(data) {
      // this.list = config.lite;
      this.randomTop(config.lite.length);
      this.addToList([...config.lite]);
    },
    addToList(list) {
      if (list.length < 3) {
        this.list = [...this.list, ...list];
        return;
      }
      this.list = [...this.list, ...list.splice(0, 3)];

      setTimeout(() => {
        this.addToList(list);
      }, Math.random() * 600);
    },
    removeAnimation(name) {
      this.list = this.list.filter((item) => item !== name);
    }
  }
};
</script>

<style scoped lang="less">
.full-parent {
  position: relative;
  color: #44c7f2;
  font-size: 3.25vh;
  background-image: linear-gradient(rgba(4, 30, 61, 1), rgba(3, 13, 32, 1));

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .bg2 {
    z-index: 1;
  }
}

.section-left,
.section-right {
  position: absolute;
  top: 0;
  z-index: 2;
  flex-direction: column;
  justify-content: space-between;
  width: 23vw;
  height: 100%;
  padding: 12.3vh 0 4vh 0;
}

.panel {
  border: 1px solid #000;

  &.top,
  &.middle,
  &.bottom {
    width: 100%;
  }
}

.section-left {
  left: 62px;

  .panel {
    &.top {
      height: 22.46vh;
    }

    &.middle {
      height: 33vh;
    }

    &.bottom {
      height: 22.46vh;
    }
  }
}

.section-right {
  right: 1.5vw;
  width: 25.5vw;

  .panel {
    &.top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 22.46vh;

      .col {
        width: 12.47vw;
      }
    }

    &.middle {
      height: 16.8vh;
    }
    &.bottom {
      height: 40.3vh;
    }
  }
}
.drop-animation {
  position: fixed;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9;
}
</style>
<style scoped>
.title-img {
  position: absolute;
  top: 2.42vw;
  left: 50%;
  z-index: 1;
  width: 25.3vw;
  height: auto;
  transform: translate3d(-50%, 0, 0);
}

.chose-img {
  position: absolute;
  top: 5.52vw;
  left: 50%;
  z-index: 1;
  width: 22.3vw;
  height: auto;
  transform: translate3d(-50%, 0, 0);
}

.map-lottie {
  position: fixed;
  z-index: 1;
}

.middle-image {
  display: inline-block;
  width: 100%;
  max-height: 100%;
  height: auto;
  margin: 0 auto;
  transform: scale(0.8);
  transform-origin: center bottom;
}
</style>
